<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="layout" content="main" />
    <gui:resources components="['toolTip']" mode='raw'/>
    <title>ToolTip Demo</title>
    <style type="text/css">
    .yui-tt {
        background-color:#FFEE69;
        border-color:#D4C237 #A6982B #A6982B;
        border-style:solid;
        border-width:1px;
        color:#000000;
        left:0;
        padding:2px 5px;
        position:relative;
        width: 100px;
        top:0;
        z-index:1;
    }
    .yui-cms-tt .yui-panel {
    	text-align: left;
    }
        .yui-panel-container.yui-cms-tt.shadow .underlay {
            top: 2px;
            bottom: -2px;
            right: -2px;
            left: -2px;
            padding-left: 4px;
        }
        .yui-cms-tt .yui-panel, .yui-cms-tt .yui-panel .bd {
        	color:#333;
        	background-color:#FDFFB4;
        	border-color:#FCC90D;
        }
        .yui-cms-tt .yui-panel .hd {
        	visible: hidden;
        	display: none;
        }
    
    </style>
</head>

<body>

    <h1>ToolTip Demo</h1>

    <gui:toolTip text="This is a tooltip." autodismissdelay="100">
        <div style="width: 200px; height: 200px; background:#8EC3E2; padding: 10px; border: 1px solid black">
            Hover over this box for a tooltip.
        </div>
    </gui:toolTip>
    
    <br/><br/>
    
    <gui:toolTip 
        controller="demo"
        action="toolTipLoader"
        params="[message:'worked']"
    >
        <div style="width: 200px; height: 200px; background:#8EC3E2; padding: 10px; border: 1px solid black">
            Hover over this box for a server rendred tooltip.
        </div>
    </gui:toolTip>
</body>

</html>